<template>
    <div class="navbar">
       <div class="left">
              <!-- 折叠按钮 -->
              <Collapse class="collapse"/>
              <!-- 面包屑 -->
              <breadcrumb class="breadcrumb-container"/>
       </div>
        <!-- 右侧下拉菜单 -->
        <div class="right-menu">
            <div class="icons">
              <AssemblySize class="toolBar-icon" />
              <Language  class="toolBar-icon" />
              <SearchMenu class="toolBar-icon" />
              <ThemeSetting class="toolBar-icon" />
              <Notification class="toolBar-icon" />
              <FullScreen class="toolBar-icon" />
            </div>
            <Avarar />
        </div>
    </div>
</template>
<script setup>
import Breadcrumb from '../Breadcrumb.vue'
import Collapse from './Collapse.vue'
import AssemblySize from '../TopIcons/AssemblySize/index.vue'
import Language from '../TopIcons/Language/index.vue'
import SearchMenu from '../TopIcons/SearchMenu/index.vue'
import ThemeSetting from '../TopIcons/ThemeSetting/index.vue'
import Notification from '../TopIcons/Notification/index.vue'
import FullScreen from '../TopIcons/FullScreen/index.vue'
import Avarar from './Avatar/index.vue'

</script>
<style lang="scss" scoped>
@import '../../../styles/theme-dark.scss';
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
 .left {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .collapse{
    margin-left: 10px;
  }
  .breadcrumb-container{
    margin-left: 20px;
  }
 }
 .right-menu {
  min-width: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .icons {
    display: flex;
    .toolBar-icon{
      padding: 0 10px;
    }
  }
 }
}
</style>
